<template>
<div class="tc-left pr10 fl">
    <ul class="clearfix uiTab1 mb5 j_outerHeight">
        <li class="col-md-3 fl uiTab1-active"><a href="javascript:">分司</a></li>
    </ul>
    <div class="daily_title j_outerHeight">
        <ul class="clearfix">
            <li class="title_cur">全</li>
        </ul>
    </div>
    <div class="contentbox">
        <div class="dailyftSearch clearfix" v-if="searchFlag">
            <div class="fl uiHas-textIcon">
                <input type="text" class="col-md-12" placeholder="分司名" v-model="searchText" @keyup.enter="selectFilter(-1)">
                <i class="uiText-searchIcon bgIcon" @click="selectFilter(-1)"></i>
            </div>
        </div>
        <table class="uiTable j_outerHeight">
            <thead>
                <tr>
                    <th width="20%">
                        <span class="serial_number">司<i class="bgIcon select-btn" @click="setSearchFlag()"></i></span>
                    </th>
                    <th width="20%">
                        <select class="theadselect" v-model="leftCityId" @change="selectFilter()" :disabled="Number(userInfo.u_diqu)==39?false:true">
                            <option title="全部" selected="selected" value="">城</option>
                            <option v-for="(item, index) in cityList" :key="index" :value="item.cityId">{{item.cityName}}</option>
                        </select>
                    </th>
                    <th width="20%">管级
                        <!-- <select v-model="star" class="theadselect" @change="selectFilter()">
                            <option value=""></option>
                            <option value="司离">司离</option>
                            <option value="司招">司招</option>
                            <option value="初级">初级</option>
                            <option value="中级">中级</option>
                            <option value="高级">高级</option>
                            <option value="管级">管级</option>
                            <option value="城级">城级</option>
                        </select> -->
                    </th>
                    <th width="20%">业状</th>
                    <th>倒计时</th>
                </tr>
            </thead>
        </table>
        <div class="scroll-content thinScroll thinScroll-table" v-scrollHeight="36">
            <table class="uiTable uiTable-striped uiTable-hover" id="tab1">
                <tbody>
                    <tr :title="item.liShu" v-for="(item,index) in leftListData" :key="index" :class="{'tractive':index === trIndex}" @click="siderBarTrclick(index,item)">
                        <!-- 分司 -->
                        <td width="20%">{{item.dqname}}</td>
                        <!-- 城 -->
                        <td width="20%">{{item.liShuDqname}}</td>
                        <!-- 管级 -->
                        <td width="20%">{{item.manageLevel}}</td>
                        <!-- 业状 -->
                        <td width="20%">-</td>
                        <!-- 倒计时 -->
                        <td v-if="item.countdown >= '0'" class="cGreen">{{item.countdown}}</td>
                        <td v-if="item.countdown < '0'" class="cRed">{{item.countdown}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="j_outerHeight clearfix tj_bottom">
            <p class="col-md-3" data-title="全部">{{allCount}}</p>
            <p class="col-md-3 cGreen" data-title="正常">{{zcCount}}</p>
            <p class="col-md-3 cOrange" data-title="异常">{{ycCount}}</p>
            <p class="col-md-3 cRed" data-title="问题">{{wtCount}}</p>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getAllGCJL, searchCities, findLevel } from '../Resources/Api'
export default {
    data () {
        return {
            loading: true,
            trIndex: 0,
            searchFlag: false,
            searchText: '',
            leftCityId: '', // 当前城
            cityList: [], // 城列表
            // star: '',
            levels: [], // 级别
            currentLevel: '', // 当前级别

            leftListData: [], // 遍历的数据
            leftListDataClone: [], // 保存原始数据


            signValue: '', // 正/异/问题

            allCount: 0,
            zcCount: 0,
            ycCount: 0,
            wtCount: 0
        }
    },
    computed: {
        ...mapGetters(['updateLeft', 'userInfo'])
    },
    created () {
        this.findLevel()
        this.searchCities()
        this.getAllGCJL()
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        // 城
        searchCities () {
            searchCities().then(results => {
                if (results.data.code === 0) {
                    this.cityList = results.data.result
                }
            }).catch(error => { console.log(error) })
        },
        // 级别
        findLevel () {
            findLevel({
            }).then(results => {
                if (results.data.code === 0) {
                    this.levels = results.data.result
                }
            }).catch(error => {
                console.log(error)
            })
        },
        setSearchFlag () {
            this.searchFlag = true
        },
        /**
         * 获取左侧列表
         */
        getAllGCJL () {
            this.loading = true
            getAllGCJL({
                user_card_no: this.userInfo.u_kahao,
                diqu: Number(this.userInfo.u_diqu) === 39 ? null : this.userInfo.u_diqu
            }).then(results => {
                let list = results.data.Body.allGCJL
                list.sort((a, b) => {
                    return a.countdown - b.countdown
                })
                this.leftListData = this.leftListDataClone = list

                this.loading = false
                this.updateBottom()
                if (this.leftListData.length > 0) {
                    this.siderBarTrclick(0, this.leftListData[0])
                }
            }).catch(() => {})
        },
        /**
         * 左侧点击保存当前项信息
         */
        siderBarTrclick (index, item) {
            this.trIndex = index
            // 保存字段时 一定要确认公共字段一致
            this.setLeftData(item)
            // 点击是否关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        },
        /**
         * 条件筛选
         */
        selectFilter (value) {
            if (value === -1) {
                this.searchFlag = false
            }
            let cityReg = new RegExp(`^${this.leftCityId}$`)
            let searchTextReg = new RegExp(`${this.searchText}`)
            // let starReg = new RegExp(`^${this.star}$`)

            if (!this.leftCityId) cityReg = new RegExp(/[\s\S]*/)
            if (!this.searchText) searchTextReg = new RegExp(/[\s\S]*/)
            // if (!this.star) starReg = new RegExp(/[\s\S]*/)

            this.leftListData = this.leftListDataClone.filter(item => (
                cityReg.test(item.liShu) && searchTextReg.test(item.dqname))
            )


            // let signReg = new RegExp(`${this.signValue}`)
            // if (!this.signValue) signReg = new RegExp(/[\s\S]*/)
            // this.leftListData = this.leftListDataClone.filter(item => (
            //     signReg.test(item.returnVisitState))
            // )
            this.updateBottom()

            if (this.leftListData.length > 0) {
                this.siderBarTrclick(0, this.leftListData[0])
            }
        },
        /**
         * 更新底部正常异常问题的数量
         */
        updateBottom () {
            let zcCount = 0
            let ycCount = 0
            let wtCount = 0

            for (var item of this.leftListData) {
                if (item.returnVisitState === '正常') {
                    zcCount = zcCount + 1
                }
                if (item.returnVisitState === '异常') {
                    ycCount = ycCount + 1
                }
                if (item.returnVisitState === '问题') {
                    wtCount = wtCount + 1
                }
            }
            this.allCount = this.leftListData.length
            this.zcCount = zcCount
            this.ycCount = ycCount
            this.wtCount = wtCount
        }
    },
    watch: {
        updateLeft () {
            this.findLevel()
            this.searchCities()
            this.getAllGCJL()
        }
    }
}
</script>
